<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="head">
                    <div class="head1">
                        <span>患者姓名：</span>
                        <el-input v-model="seaUser.seaName" placeholder="请输入姓名" />
                    </div>
                    <div class="head1">
                        <span>状态：</span>
                        <el-select v-model="seaUser.seaType" placeholder="全部">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                                :disabled="item.disabled" />
                        </el-select>
                    </div>
                    <div class="head1">
                        <span>挂号日期：</span>
                        <el-date-picker v-model="regData" type="daterange" range-separator="——" start-placeholder=""
                            end-placeholder="" :size="size" />
                    </div>
                    <el-button type="primary" @click="search">查询</el-button>
                    <!-- <el-button type="primary" @click="cancelNumSave">新增</el-button>
                    <el-button type="primary" @click="time">时间</el-button> -->
                    <!-- <el-button type="primary" @click="open">测试</el-button> -->

                </div>
            </el-header>

            <el-main>
                <el-table :data="getRegData" style="width: 100%">
                    <el-table-column label="挂号编号" width="180">
                        <template #default="scope">
                            <div style="display: flex; align-items: center">
                                <span style="margin-left: 10px">{{ scope.row.id }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="挂号费（元）" width="110">
                        <template #default="scope">

                            {{ scope.row.registeredFees }}

                        </template>
                    </el-table-column>
                    <el-table-column label="科室名称" width="80">
                        <template #default="scope">
                            <span v-if="scope.row.doctorShifts">
                                {{ scope.row.doctorShifts.department }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="医生姓名" width="80">
                        <template #default="scope">

                            {{ scope.row.doctorName }}

                        </template>
                    </el-table-column>
                    <el-table-column label="患者姓名" width="100">
                        <template #default="scope">
                            <span v-if="scope.row.patientBank">

                                {{ scope.row.patientBank.bankName }}
                            </span>

                        </template>
                    </el-table-column>
                    <el-table-column label="挂号时间" width="180">
                        <template #default="scope">

                            {{ scope.row.registeredTime }}

                        </template>
                    </el-table-column>
                    <el-table-column label="操作员" width="100">
                        <template #default="scope">
                            <span v-if="scope.row.doctorShifts">
                                {{ scope.row.doctorShifts.doctorName }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="号类型" width="100">
                        <template #default="scope">

                            <template v-if="scope.row.registrationFee != null">
                                {{ scope.row.registrationFee.regType }}
                            </template>
                            <!-- scope.row.registrationFee -->
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="100">
                        <template #default="scope">
                            <!-- {{ scope.row.stateType }} -->
                            <span v-if="scope.row.stateType == 0">待支付</span>
                            <span v-if="scope.row.stateType == 1">待就诊</span>
                            <span v-if="scope.row.stateType == 3">已退号</span>
                            <span v-if="scope.row.stateType == 2">已作废</span>
                            <span v-if="scope.row.stateType == 4">已就诊</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="Operations">
                        <template #default="scope">
                            <span v-if="scope.row.stateType == 0">
                                <el-button type="warning" @click="payClick(scope.row)">收费</el-button>
                            </span>
                            <span v-if="scope.row.stateType == 1">
                                <el-button type="primary" @click="cancelNum(scope.row)">退号</el-button>
                                <el-button type="danger" @click="waste(scope.row)">作废</el-button>
                            </span>
                            <span v-if="scope.row.stateType == 3">
                                <el-button type="warning" disabled>已退号</el-button>
                            </span>
                            <span v-if="scope.row.stateType == 2">
                                <el-button type="danger" disabled>已作废</el-button>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="pages">
                    <div>
                        <el-pagination v-model:page-size="pageSize" @current-change="pageChange" small background
                            layout="prev, pager, next" :total=store.state.registerList.tableTotal class="mt-4" />
                    </div>
                </div>
                <!-- 退号弹框 -->
                <el-dialog v-model="dialogVisible" title="挂号[退款]">
                    <el-form>
                        <el-form-item label="科室名称" :label-width="formLabelWidth">
                            <el-input v-model="user.depName" autocomplete="off" disabled />
                        </el-form-item>
                        <el-form-item label="挂号类型" :label-width="formLabelWidth">
                            <el-input v-model="user.depType" autocomplete="off" disabled />
                        </el-form-item>
                        <el-form-item label="挂号费用" :label-width="formLabelWidth">
                            <el-input v-model="user.depPrice" autocomplete="off" disabled />
                        </el-form-item>

                        <el-form-item label="退款说明" :label-width="formLabelWidth">
                            <el-input :rows="2" type="textarea" v-model="user.moneyRefund" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button type="primary" @click="cancelNumSave">
                                退款
                            </el-button>
                        </span>
                        <!-- <el-button type="primary" @click="open">测试</el-button> -->
                    </template>
                </el-dialog>
            </el-main>
            <!-- <el-footer>Footer</el-footer> -->
        </el-container>
    </div>
    <el-dialog v-model="payDialog" title="支付宝支付" width="30%" align-center>
        <span>支付宝沙盒测试支付</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="payDialog = false">取消</el-button>
                <el-button type="primary" @click="payMoney">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
  


<script lang="ts" setup>
import { ref, computed } from "vue";
import { onBeforeMount } from "vue";
import axios from "@/utils/http";
import { useStore, mapMutations, mapGetters } from "vuex";
import { ElMessage, ElMessageBox } from 'element-plus'
const regData = ref('')
const dialogVisible = ref(false)
const store = useStore();
const formLabelWidth = "140px";
const pageSize = ref(5)
const value = ref('')
const value1 = ref('')
const input = ref('')
const payClick = (row: any) => {
    payMsg.value = row;
    payDialog.value = true;
}
const payDialog = ref(false);
const payMsg = ref(null)
const payMoney = () => {
    payDialog.value = false
    if (store.state.router.userData.userInfo.empUserName == undefined) {
        ElMessage({
            message: '请登录',
            type: 'error',
        })
        return
    }
    window.location.href = "/alipay?message=" + store.state.router.userData.userInfo.empUserName +
        "&orderId=" + payMsg.value.id +
        "&price=" + payMsg.value.registeredFees +
        "&tradeType=1"
    ElMessage({
        message: '支付成功',
        type: 'success',
    })
}
const currentpage1 = ref(1)
const user = ref({
    depName: '', depPrice: '', depType: '', id: '', moneyRefund: ''
})
const seaUser = ref(
    {
        seaName: '', seaType: '', endTime: ''
    }
)
const options = [
    {
        value: '',
        label: '全部',
    },
    {
        value: '4',
        label: '已就诊',

    },
    {
        value: '1',
        label: '待就诊',
    },
    {
        value: '3',
        label: '已退号',
    },
    {
        value: '2',
        label: '已作废',
    },

]
const tableData = [

]

// 测试样式
const open = () => {
    if (!user.value.moneyRefund) {
        ElMessage({
            showClose: true,
            message: '退款说明不能为空！！！',
            type: 'warning',
        })
    }
    else {
        ElMessageBox.confirm(
            '确认退费吗亲？',
            '温馨提示',
            {
                confirmButtonText: '确认退费',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                ElMessage({
                    type: 'success',
                    message: '操作成功',
                })


            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消操作',
                })
            })
    }

}


const time = () => {
    // console.log(regData.value);
    // console.log(new Date(regData.value[0]).getFullYear());
    // console.log(new Date(regData.value[0]).get("yyyy-mm-dd"));
    // console.log(new Date(regData.value[0]).getMonth()+1);
    // console.log(new Date(regData.value[1]).getDate());
    const year = String(new Date(regData.value[0]).getFullYear())
    const mon = String(new Date(regData.value[0]).getMonth() + 1)
    const day = String(new Date(regData.value[1]).getDate())
    const endTime = year + "-" + mon + "-" + day
    seaUser.value.endTime = endTime
    console.log(endTime);

}
const test = () => {
    dialogVisible.value = true
}
const getRegData = computed(
    mapGetters(["getRegData"]).getRegData.bind({
        $store: store,
    })
);
// 获取全部数据接口函数
const data: any = ref("")
const setRegData = mapMutations(["setRegData"]).setRegData.bind({
    $store: store,
});

// 页面方法
const pageChange = (currentPage: any) => {
    currentpage1.value = currentPage
    setRegData(
        {
            currentPage: currentPage,
            pageSize: pageSize.value
        }
    )
}
onBeforeMount(
    () => {
        console.log("测试");

        setRegData({
            currentPage: 1,
            pageSize: pageSize.value
        })

    })


// 搜索函数接口
const searchRegData = mapMutations(["searchRegData"]).searchRegData.bind({
    $store: store,
});
const search = () => {
    console.log(seaUser.value.seaName);
    console.log(seaUser.value.seaType);
    const year = String(new Date(regData.value[1]).getFullYear())
    const mon = String(new Date(regData.value[1]).getMonth() + 1)
    const day = String(new Date(regData.value[1]).getDate())
    const endTime = year + "-" + mon + "-" + day + " 23:00:00"
    seaUser.value.endTime = endTime
    console.log("结束时间", endTime);


    searchRegData({
        bankName: seaUser.value.seaName,
        stateType: seaUser.value.seaType,
        endTime: seaUser.value.endTime,
        currentPage: 1,
        pageSize: pageSize.value
    })



}

// 退号弹窗（顺便拿取数据）
const cancelNum = (row: any) => {
    dialogVisible.value = true
    user.value.id = row.id
    user.value.depName = row.doctorShifts.department
    user.value.depType = row.registrationFee.regType
    user.value.depPrice = row.registeredFees


}
// 退号保存接口
const refundReg = mapMutations(["refundReg"]).refundReg.bind({
    $store: store,
});
const cancelRegNum = mapMutations(["cancelRegNum"]).cancelRegNum.bind({
    $store: store,
});
const cancelNumSave = () => {

    if (!user.value.moneyRefund) {
        ElMessage({
            showClose: true,
            message: '退款说明不能为空！！！',
            type: 'warning',
        })
    }
    else {
        ElMessageBox.confirm(
            '确认退费吗亲？',
            '温馨提示',
            {
                confirmButtonText: '确认退费',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                ElMessage({
                    type: 'success',
                    message: '退费成功',
                })
                refundReg({

                })
                cancelRegNum({
                    id: user.value.id
                })
                setRegData({
                    currentPage: currentpage1.value,
                    pageSize: pageSize.value
                })
                dialogVisible.value = false
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '取消操作',
                })
            })
    }



}
// 废号按钮函数
const wasteRegNum = mapMutations(["wasteRegNum"]).wasteRegNum.bind({
    $store: store,
});
const waste = (row: any) => {

    ElMessageBox.confirm(
        '作废后无法就诊，确认作废吗？',
        '警告',
        {
            confirmButtonText: '确认作废',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '作废成功',
            })
            wasteRegNum({
                id: row.id
            })
            setRegData({
                currentPage: currentpage1.value,
                pageSize: pageSize.value
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
}
</script>



<style scoped>
body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #676a6d;
    background-color: #f3f5f8;
}

.head {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "sans-serif";
    color: #676a6d;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
    width: 1240px;
    /* margin-left: -200px; */

}

.head1 {
    padding: 10px;
    margin-right: 5px;


}

.el-input {
    width: 180px;
}

.pages {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.conhead {
    width: 540px;
    height: 40px;
}

.conheadbox {
    width: 60px;
    height: 50px;

}
</style>